<template>
    <div class="login-page">
        <div class="login-box">
            <div class="logo-box">
                <div class="right">
                    <div class="sys-name">OJ后台管理</div>
                    <div class="sys-sub-name">欲买桂花同载酒，终不似，少年游。</div>
                </div>
            </div>
            <div class="form-box">
                <div class="form-item" :class="{ 'focused': accountFocused }">
                    <img src="../assets/images/shouji.png">
                    <el-input 
                        v-model="userAccount" 
                        placeholder="请输入账号"
                        @focus="accountFocused = true"
                        @blur="accountFocused = false"
                        @keyup.enter="loginFun"
                    />
                </div>
                <div class="form-item" :class="{ 'focused': passwordFocused }">
                    <img src="../assets/images/yanzhengma.png">
                    <el-input  
                        v-model="password" 
                        type="password" 
                        show-password 
                        placeholder="请输入密码"
                        @focus="passwordFocused = true"
                        @blur="passwordFocused = false"
                        @keyup.enter="loginFun"
                    />
                </div>
                <div class="submit-box" @click="loginFun" :class="{ 'loading': isLoading }">
                    <span v-if="!isLoading">登录</span>
                    <el-icon v-else class="is-loading"><Loading /></el-icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { loginService } from '@/apis/suser';
import { setToken } from '@/utils/cookie';
import router from '@/router';
import { Loading } from '@element-plus/icons-vue'

const userAccount = ref('');
const password = ref('');
const isLoading = ref(false);
const accountFocused = ref(false);
const passwordFocused = ref(false);

async function loginFun() {
    if (!userAccount.value || !password.value) {
        ElMessage.warning('请输入账号和密码');
        return;
    }

    isLoading.value = true;
    try {
        const loginResult = await loginService(userAccount.value, password.value);
        setToken(loginResult.data);
        ElMessage.success('登录成功');
        router.push('/oj/layout/cuser');
    } catch (error) {
        console.log("error", error);
        ElMessage.error(error.message || '登录失败，请重试');
    } finally {
        isLoading.value = false;
    }
}
</script>

<style lang="scss" scoped>
.login-page {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .login-box {
        width: 456px;
        height: 404px;
        background: #ffffff;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        border-radius: 16px;
        padding: 48px 72px;
        animation: fadeIn 0.5s ease;

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .logo-box {
            text-align: center;
            margin-bottom: 48px;

            .sys-name {
                font-size: 32px;
                font-weight: 600;
                color: #32C5FF;
                margin-bottom: 16px;
                letter-spacing: 2px;
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            }

            .sys-sub-name {
                font-size: 16px;
                color: #606266;
                font-style: italic;
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            }
        }

        .form-box {
            .form-item {
                position: relative;
                margin-bottom: 24px;
                border-bottom: 2px solid #eee;
                transition: all 0.3s ease;
                
                &.focused {
                    border-color: #32C5FF;
                    
                    img {
                        filter: brightness(0) saturate(100%) invert(67%) sepia(87%) saturate(1261%) hue-rotate(157deg) brightness(101%) contrast(101%);
                    }
                }
                
                img {
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    transition: all 0.3s ease;
                }

                :deep(.el-input__wrapper) {
                    box-shadow: none !important;
                    padding-left: 30px;
                    background: transparent;
                    
                    &.is-focus {
                        box-shadow: none !important;
                    }

                    .el-input__inner {
                        height: 40px;
                        font-size: 14px;
                        color: #606266;
                        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                        
                        &::placeholder {
                            color: #909399;
                        }
                    }
                }
            }
        }

        .submit-box {
            margin-top: 48px;
            width: 100%;
            height: 48px;
            background: #32C5FF;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            letter-spacing: 4px;
            transition: all 0.3s ease;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

            &:hover {
                background: #4DD2FF;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(50, 197, 255, 0.3);
            }

            &:active {
                transform: translateY(0);
            }

            &.loading {
                background: #4DD2FF;
                cursor: not-allowed;
            }

            .el-icon {
                font-size: 24px;
                animation: rotating 2s linear infinite;
            }
        }
    }
}
</style>